<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .color {
      color: red;
    }
  </style>
</head>
<body>
  <button>click</button>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p>绑定和执行一次</p>
  <p>开关切换</p>
  <script src="./jq-3.6.0.min.js"></script>
  <script>
    // 点击事件
    $('button').on('click', function() {
      console.log('hello world');
    })

    // 可以多事件触发 事件名用空格隔开
    $('button').on('click mouseenter', function(e) {
      console.log(e.type);
    })

    // 可以做事件委托
    $('ul').on('click', 'li', function() {
      console.log($(this).css('color', 'red'));
    })

    // 解绑所有事件
    $('ul').off();

    // 解绑单个事件
    $('ul').off('click');

    // 解绑委托事件
    $('ul').off('click', 'li');

    // 只绑定和执行一次
    $('p').one('click', function() {
      // 点击第一次时打印 以后就不会再打印了
      console.log('执行了');
    })

    // 自动触发
    // 页面加载到该函数时 就自动触发点击 
    // 相当于$('button').click()
    $('button').trigger('click');

    // 另一种写法
    $('button').triggerHandler('click');

    // 悬停事件
    // 有两个参数 都是函数
    // 第一个参数表示悬停时的执行内容
    // 第二个参数表示悬停结束时的执行内容
    $('p').eq(0).hover(
      function() {
        $(this).addClass('color');
      },
      function() {
        $(this).removeClass('color');
      }
    )

  </script>
</body>
</html>